<!DOCTYPE html>

<html lang="zh-cmn-Hans-CN">

<head>
    <meta charset="UTF-8" name="viewport"
        content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1,viewport-fit=cover">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <style>
        html {
            overflow: hidden;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }

        body {
            position: absolute;
            margin: 0;
            top: constant(safe-area-inset-top);
            left: constant(safe-area-inset-left);
            right: constant(safe-area-inset-right);
            top: env(safe-area-inset-top);
            left: constant(safe-area-inset-left);
            right: constant(safe-area-inset-right);
            bottom: 0;
            background-color: rgb(0, 0, 0, 0);
            overflow: hidden;
            touch-action: none;
            padding-bottom: env(safe-area-inset-bottom);
        }

        #app-container {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: 0;
            padding: 0;
            background-color: rgba(0, 0, 0, 0);
        }

        #app-index {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
        }

        @media screen and (orientation: portrait) {
            body {
                position: absolute;
                margin: 0;
                top: constant(safe-area-inset-top);
                bottom: constant(safe-area-inset-bottom);
                left: constant(safe-area-inset-left);
                right: constant(safe-area-inset-right);
                top: env(safe-area-inset-top);
                bottom: env(safe-area-inset-bottom);
                left: env(safe-area-inset-left);
                right: env(safe-area-inset-right);
                background-color: rgba(0, 0, 0, 0);
                overflow: hidden;
                touch-action: none;
            }
        }

        @media screen and (orientation: landscape) {
            body {
                position: absolute;
                margin: 0;
                top: costant(safe-area-inset-top);
                left: constant(safe-area-inset-left);
                right: constant(safe-area-inset-right);
                top: env(safe-area-inset-top);
                left: env(safe-area-inset-left);
                right: env(safe-area-inset-right);
                bottom: 0;
                background-color: rgba(0, 0, 0, 0);
                overflow: hidden;
                touch-action: none;
            }
        }
    </style>
    <script type="text/javascript">

        const stop = () => {
            return false;
        }
        document.oncontextmenu = stop;

        const equal = (a, b) => {
            return Math.abs(Math.abs(a - b)) < 10;
        };

        const onWindowResize = () => {
            const rect = document.body.getBoundingClientRect();
            const width = rect.width + 'px';
            const height = rect.height + 'px';
            const app = document.getElementById('app-index');
            const orientation = window.orientation;
            if (orientation === undefined) return;

            if (rect.width >= rect.height) {
                return;
            }
            if (equal(orientation, 0) || equal(orientation, 180)) {
                app.style.width = height;
                app.style.height = width;
                app.style.transform = 'rotate(90deg)';
            }
            if (equal(orientation, 90) || equal(orientation, -90)) {
                app.style.width = height;
                app.style.height = width;
                app.style.transform = 'rotate(0)';
            }
        };
        window.onload = () => {
            onWindowResize();
        };
        window.onorientationchange = () => {
            onWindowResize();
        };
        window.addEventListener('resize', (e) => {
            onWindowResize();
        });

    </script>
</head>

<body>
    <div id="app-container">
        <iframe title="app-index" id="app-index" src="index-original.html" style="transform: rotate(0);"></iframe>
    </div>
</body>

</html>